<template>
  <div class="app-container">
    <el-dialog :visible="logisticsVisible" title="物流信息" @close="closeDialog">

      <div v-loading="loading" class="dialogContent">
        <span v-if="logisticsOrderSn">订单号:{{ logisticsOrderSn }}</span>
        <ul class="logisticsVisible">
          <li v-for="(item, index) in logisticsList" :key="index">
            <span>{{ item.ftime }}</span>
            <span>{{ item.context }}</span>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ExpressInfo } from '@/api/express'
export default {
  filters: {
    toObject() {

    }
  },
  props: {
    logisticsVisible: {
      type: Boolean,
      required: true
    },
    logisticsOrderSn: {
      type: String,
      required: true
    },
    logisticsIndex: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      id: -1,
      loading: false,
      logisticsList: [
      ]
    }
  },
  watch: {
    logisticsIndex(val) {
      this.checkExpressInfo()
      // this.logisticsId
    }
  },

  created() {
    // this.id = this.logisticsOrderSn
    // console.log('穿到子集的id:', this.logisticsId)
  },
  methods: {
    checkExpressInfo() {
      this.loading = true
      //   const expressData = new FormData();
      //   expressData.append('orderSn', this.logisticsOrderSn)

      ExpressInfo({ orderSn: this.logisticsOrderSn }).then(res => {
        if (res.code === '200') {
          this.logisticsList = res.data.list[0].data
          console.log(this.logisticsList)
          this.loading = false
        }
        console.log(res)
      })
    },
    closeDialog() {
      this.$emit('update:logisticsVisible', false)
    }
  }
}
</script>

<style lang="scss">
.dialogContent{
    padding: 30px;
    ul {
        padding-left:18px
    }
    li {
        line-height: 40px;
        list-style: circle;
        span{
            margin-right: 20px;
        }
    }
}
</style>

